<!--
 * @Author: [lcy]
 * @Date: 2021-10-25 22:27:14
 * @LastEditors: [lcy]
 * @LastEditTime: 2021-10-28 20:19:59
 * @Description: 
-->
<template>
  <!-- 资讯分类管理 -->
  <div>
    <!-- 新增按钮 -->
    <div>
      <el-button
        type="primary" plain
        @click="dialogFormVisible = true"
      >新增</el-button>
    </div>
    <!-- 表格数据 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" />
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info" round
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger" round
              @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出框 -->
    <div>
      <el-dialog title="新增栏目信息" :visible.sync="dialogFormVisible">
        <el-form ref="ruleForm" :model="form" :rules="rules">
          <el-form-item
            prop="name"
            label="栏目名称"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="form.no" autocomplete="off" />
          </el-form-item>
          <el-form-item label="栏目介绍" :label-width="formLabelWidth">
            <el-input
              v-model="form.description"
              type="textarea"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { findAll, saveOrUpdate, deleteById } from '@/api/zixunfl.js'
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: '',
        no: '',
        description: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.form = { ...row }
      this.addSave()
    },
    // 删除数据
    async handleDelete(id) {
      const res = await deleteById(id)
      this.init()
    },
    async init() {
      const res = await findAll()
      this.tableData = [...res.data]
    },
    // 新增保存
    addSave() {
      this.$refs['ruleForm'].validate(async(valid) => {
        if (valid) {
          this.dialogFormVisible = false
          
          const res = await saveOrUpdate(this.form);
          
          this.init()
          this.form = {}
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
